<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSTree</title>
    <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.css">

    <style>
        .center {
            margin: 50px auto;
            width: 600px;
        }

        .jstree-nav {
            list-style: none;
        }

        .jstree-nav > li {
            padding: 10px 0;
        }

        .jstree-nav > li:hover {
            background-color: #eee;
        }

        .jstree-nav > .item-active {
            background-color: #0e90d2 !important;
        }

        .jstree-splitor {
            width: 20px;
            display: inline-block;
        }

        .jstree-nav .fa {
            margin-right: 5px;
        }

        .jstree-nav .fa-caret-right {
            margin-left: 9.3px;
        }

        .jstree-nav .fa-caret-down {
            margin-left: 5.9px;
        }

        .jstree-hide { display: none; }
    </style>
</head>
<body>
    <div class="center">
        <div id="jstree"></div>
    </div>


    <script type='text/javascript' src="../bower_components/jquery/dist/jquery.min.js"></script>   
    <script>
        var data = [
            {
                label: '书签栏',
                isFolder: true,
                nodes: [
                    {
                        label: '苹果中国',
                        isFolder: false
                    },
                    {
                        label: 'iCloud',
                        isFolder: false
                    },
                    {
                        label: '新浪微博',
                        isFolder: false
                    },
                    {
                        label: '维基百科',
                        isFolder: false
                    },
                    {
                        label: '百度',
                        isFolder: false
                    },
                    {
                        label: '中国雅虎',
                        isFolder: false
                    },
                ]
            },
            {
                label: '社区交友',
                isFolder: true,
                nodes: [
                    {
                        label: '朋友圈1',
                        isFolder: false
                    },
                    {
                        label: '开心网',
                        isFolder: false
                    },
                    {
                        label: '其他',
                        isFolder: true,
                        nodes: [
                            {
                                label: 'roger',
                                isFolder: true,
                                nodes: [
                                    {
                                        label: '朋友圈2',
                                        isFolder: false
                                    },
                                    {
                                        label: '朋友圈3',
                                        isFolder: true,
                                        nodes: [
                                            {
                                                label: '朋友圈4',
                                                isFolder: false
                                            },
                                            {
                                                label: '朋友圈5',
                                                isFolder: true,
                                                nodes: [
                                                    {
                                                        label: '朋友圈6',
                                                        isFolder: false
                                                    },
                                                    {
                                                        label: '朋友圈7',
                                                        isFolder: false
                                                    },
                                                ]
                                            },
                                        ]
                                    },
                                ]
                            },
                            {
                                label: '朋友圈8',
                                isFolder: false
                            },
                            {
                                label: '朋友圈9',
                                isFolder: true,
                                nodes: [
                                    {
                                        label: '朋友圈10',
                                        isFolder: false
                                    },
                                    {
                                        label: '朋友圈11',
                                        isFolder: true,
                                        nodes: [
                                            {
                                                label: '朋友圈12',
                                                isFolder: false
                                            },
                                            {
                                                label: '朋友圈13',
                                                isFolder: false
                                            },
                                        ]
                                    },
                                ]
                            },
                        ]
                    },
                ]
            }
        ];
        jQuery(document).ready(function($) {
            $('#jstree').JSTree(data);
        });


        $.fn.JSTree = function(data) {
            var $containerTpl = $('<ul class="jstree-nav"></ul>'),
                splitorTpl = '<span class="jstree-splitor"></span>',
                extendLevel = 1;

            function TreeBuilder (data, level, $container) {
                if (!data) { return; }

                var splitor = (new Array(level+1).join(splitorTpl)),
                    splitorFolder = (new Array(level).join(splitorTpl)),
                    callee = arguments.callee;
                for (var i = 0, len = data.length, tmp, str, $node; i < len; i ++ ) {
                    tmp = data[i],
                    str = [];

                    str.push('<li>');
                    if (tmp.isFolder) {
                        str.push(splitorFolder);
                        if (level > extendLevel) {
                            str.push('<span class="fa fa-caret-right"></span>');
                        } else {
                            str.push('<span class="fa fa-caret-down"></span>');
                        }
                        str.push('<span class="fa fa-folder-o"></span>');
                        str.push('<span>'+ tmp.label + '</span>');                                                
                    } else {
                        str.push(splitor);
                        str.push('<span class="fa fa-file-o"></span>');
                        str.push('<span>'+ tmp.label + '</span>');    
                    }
                    str.push('</li>');

                    $node = $(str.join('')).data('node-data', tmp.data).data('level', level);
                    if (level > (extendLevel + 1)) {
                        $node.addClass('jstree-hide');
                    }
                    $container.append($node);

                    if (!!tmp.nodes)  {
                        callee(tmp.nodes, level + 1, $container);
                    }
                }
            }


            TreeBuilder(data, 1, $containerTpl);
            $(this).empty().append($containerTpl);

            $containerTpl.on('click', 'li', function(event) {
                event.preventDefault();
                
                var $li = $(this), nextLevel = $li.data('level'),
                    $next = $li.next();

                console.info(nextLevel);
                if ($li.children('.fa-folder-o').length) {
                    // 点击文件,展开或者收起子元素
                    var $icon = $li.children('.fa').eq(0),
                        isHide = $icon.hasClass('fa-caret-right');

                    function toggleItem($item, level, isShow) {
                        var callee = arguments.callee;
                        while ($item.data('level') === level) {
                            console.info(level)
                            $item.toggleClass('jstree-hide', !isShow);
                            if ($item.children('.fa-folder-o').length) {
                                $item = callee($item.next(), level+1, $item.children('.fa-caret-down').length);
                            } else {
                                $item = $item.next();                                
                            }
                        }

                        return $item;
                    }

                    if (isHide) {  // to show
                        toggleItem($next, nextLevel+1, isHide);
                    } else {  // to hide
                        while($next.data('level') > nextLevel) {
                            $next.toggleClass('jstree-hide', true);
                            $next = $next.next();
                        }
                    }

                    $icon.toggleClass('fa-caret-right fa-caret-down');
                }
                $li.addClass('item-active').siblings('li').removeClass('item-active');
            }); 
        }
    </script> 
</body>
</html>